<template>
  <div class="container">
    <base-title base-title="修改文章" />
    <mavon-editor ref="mdEditRef" v-model="editInfo.mdContent" @imgAdd="imgAdd" @imgDel="imgDel" style="height: calc(100% - 120px)" />
    <el-button type="primary" @click="editSubmit">提交</el-button>
    <EditDialog :editInfo="editInfo" :labels="labels" :types="types" v-if="articleStore.editFormVisible" />
  </div>
</template>

<script lang="ts" name="articleEdit" setup>
  import { useRoute } from 'vue-router'
  import { ref, reactive, onBeforeMount } from 'vue'
  import notification from '@/utils/notification'
  import EditDialog from './childComponents/EditDialog.vue'
  import { getAllTypesRequest } from '@/network/api/type-api'
  import { getAllLabelsRequest } from '@/network/api/label-api'
  import { queryArticleByIdRequest, uploadPicturesRequest } from '@/network/api/article-api'
  import { SERVER_HOST, SERVER_PORT } from '@/constants/index'
  import useArticleStore from '@/store/article'

  interface iPicture {
    [pos: number]: any
  }
  const articleStore = useArticleStore()
  let img_file = reactive<iPicture>({})
  const mdEditRef = ref(null)
  const route = useRoute()
  const id = route.params.id as string
  const editInfo = reactive({
    article_id: 0,
    mdContent: '',
    article_title: '',
    article_cover_url: '',
    article_type: 0,
    is_sticky: false,
    is_recommend: false,
    article_labels: [],
  })
  let labels = ref([])
  let types = ref([])

  // 缓存图片信息
  const imgAdd = (pos: number, file: any) => {
    img_file[pos] = file
  }
  // 删除某个图片缓存信息
  const imgDel = (pos: number) => {
    delete img_file[pos]
  }
  // 上传封面
  const uploadImg = async (ref: any) => {
    const formdata = new FormData()
    for (const _img in img_file) {
      formdata.append('picture', img_file[_img])
    }
    const result = await uploadPicturesRequest(formdata)
    result.result.fileNames.forEach((item: string, index: number) => {
      const pictureUrl = `${SERVER_HOST}:${SERVER_PORT}/article/images/${item}`
      ref.$img2Url(index + 1, pictureUrl)
    })
    img_file = {}
  }
  const editSubmit = async () => {
    if (Object.values(img_file).length !== 0) {
      await uploadImg(mdEditRef.value)
    }
    if (!editInfo.mdContent.trim()) return notification.error('文章内容不能为空！')
    articleStore.editVisibleController(true)
  }
  onBeforeMount(async () => {
    const labelsResult = await getAllLabelsRequest()
    labels.value = labelsResult.result
    const typesResult = await getAllTypesRequest()
    types.value = typesResult.result
    const result = await queryArticleByIdRequest(parseInt(id))
    editInfo.mdContent = result.result.mdContent
    editInfo.article_id = result.result.id
    editInfo.article_title = result.result.article_title
    editInfo.article_cover_url = result.result.article_cover_url
    editInfo.article_type = result.result.article_type
    editInfo.is_recommend = result.result.is_recommend === 1 ? true : false
    editInfo.is_sticky = result.result.is_sticky === 1 ? true : false
    editInfo.article_labels = result.result.labels.map((item: any) => item.id)
  })
</script>

<style scoped></style>
